<template>
    <div>
            <nav style="text-align:center;" class="layout-navbar navbar navbar-expand-lg align-items-lg-center bg-white container-p-x">
                        <hr class="d-lg-none w-100 my-2">
            <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="#"><i class="feather icon-home"></i></a></li>
                                    <li class="breadcrumb-item active">商场管理中心</li>
                                    <li class="breadcrumb-item active">车商场管理表</li>
                                </ol>

            <div class="navbar-nav align-items-lg-center ml-auto">
                <div class="demo-navbar-notifications nav-item dropdown mr-lg-3">
                    <a class="nav-link dropdown-toggle hide-arrow" href="#" data-toggle="dropdown">
                        <i class="feather icon-bell navbar-icon align-middle"></i>
                        <span class="badge badge-danger badge-dot indicator"></span>
                        <span class="d-lg-none align-middle">&nbsp; Notifications</span>
                    </a>
                </div>
                <div class="nav-item d-none d-lg-block text-big font-weight-light line-height-1 opacity-25 mr-3 ml-1">|
                </div>
                <div class="demo-navbar-messages nav-item dropdown mr-lg-3">
                    <a class="nav-link dropdown-toggle hide-arrow" href="#" data-toggle="dropdown">
                        <i class="feather icon-mail navbar-icon align-middle"></i>
                        <span class="badge badge-success badge-dot indicator"></span>
                        <span class="d-lg-none align-middle">&nbsp; Messages</span>
                    </a>
                </div>
            </div>
        </nav>
<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="90px">小车</el-aside>
    <el-container>
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</el-container>

<el-container>
  <el-aside width="120px">摩特车</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
  </el-container>
</el-container>

<el-container>
  <el-aside width="150px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</el-container>
        <div class="layout-content">
            <!-- [ content ] Start -->
            <div class="container-fluid flex-grow-1 container-p-y">
                <div class="row">
                    <div class="col-md-9">

                        <div class="cropper-example-container">
                            <img id="cropper-example-image" src="/car/宝马8系.png" alt="Crope Image"
                                class="cropper-hidden">
                            <div class="cropper-container cropper-bg" touch-action="none"
                                style="width: 486px; height: 324px;">
                                <div class="cropper-wrap-box">
                                    <div class="cropper-canvas"
                                        style="width: 366.332px; height: 244.221px; transform: translateX(71.8993px) translateY(-11.9922px);">
                                        <img src="/car/宝马8系.png"
                                            style="width: 366.332px; height: 244.221px; transform: none;"></div>
                                </div>
                                <div class="cropper-drag-box cropper-crop cropper-modal" data-action="crop"></div>
                                <div class="cropper-crop-box"
                                    style="width: 293.065px; height: 164.849px; transform: translateX(111.38px) translateY(7.03062px);">
                                    <span class="cropper-view-box"><img src="/car/宝马8系.png"
                                            style="width: 366.332px; height: 244.221px; transform: translateX(-39.4804px) translateY(-19.0228px);"></span><span
                                        class="cropper-dashed dashed-h"></span><span
                                        class="cropper-dashed dashed-v"></span><span class="cropper-center"></span><span
                                        class="cropper-face cropper-move" data-action="all"></span><span
                                        class="cropper-line line-e" data-action="e"></span><span
                                        class="cropper-line line-n" data-action="n"></span><span
                                        class="cropper-line line-w" data-action="w"></span><span
                                        class="cropper-line line-s" data-action="s"></span><span
                                        class="cropper-point point-e" data-action="e"></span><span
                                        class="cropper-point point-n" data-action="n"></span><span
                                        class="cropper-point point-w" data-action="w"></span><span
                                        class="cropper-point point-s" data-action="s"></span><span
                                        class="cropper-point point-ne" data-action="ne"></span><span
                                        class="cropper-point point-nw" data-action="nw"></span><span
                                        class="cropper-point point-sw" data-action="sw"></span><span
                                        class="cropper-point point-se" data-action="se"></span></div>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-3">

                        <!-- Preview -->
                        <div class="mb-3 clearfix">
                            <div class="cropper-example-preview lg" style="width: 245px; height: 137.812px;"><img
                                    src="/car/宝马8系.png"
                                    style="display: block; width: 306.25px; height: 204.167px; min-width: 0px !important; min-height: 0px !important; max-width: none !important; max-height: none !important; transform: translateX(-33.0052px) translateY(-15.9029px);">
                            </div>
                            <div class="cropper-example-preview md" style="width: 128px; height: 72px;"><img
                                    src="/car/宝马8系.png"
                                    style="display: block; width: 160px; height: 106.667px; min-width: 0px !important; min-height: 0px !important; max-width: none !important; max-height: none !important; transform: translateX(-17.2435px) translateY(-8.30847px);">
                            </div>
                            <div class="cropper-example-preview sm" style="width: 64px; height: 36px;"><img
                                    src="/car/宝马8系.png"
                                    style="display: block; width: 80px; height: 53.3333px; min-width: 0px !important; min-height: 0px !important; max-width: none !important; max-height: none !important; transform: translateX(-8.62177px) translateY(-4.15423px);">
                            </div>
                            <div class="cropper-example-preview xs" style="width: 32px; height: 18px;"><img
                                    src="/car/宝马8系.png"
                                    style="display: block; width: 40px; height: 26.6667px; min-width: 0px !important; min-height: 0px !important; max-width: none !important; max-height: none !important; transform: translateX(-4.31089px) translateY(-2.07712px);">
                            </div>
                        </div>

                        <!-- Data -->
                        <div class="input-group input-group-sm mb-1">
                            <div class="input-group-prepend">
                                <span class="input-group-text">X</span>
                            </div>
                            <input type="text" class="form-control" id="cropper-example-dataX" placeholder="x"
                                readonly="">
                            <div class="input-group-append">
                                <span class="input-group-text">px</span>
                            </div>
                        </div>
                        <div class="input-group input-group-sm mb-1">
                            <div class="input-group-prepend">
                                <span class="input-group-text">Y</span>
                            </div>
                            <input type="text" class="form-control" id="cropper-example-dataY" placeholder="y"
                                readonly="">
                            <div class="input-group-append">
                                <span class="input-group-text">px</span>
                            </div>
                        </div>
                        <div class="input-group input-group-sm mb-1">
                            <div class="input-group-prepend">
                                <span class="input-group-text">Width</span>
                            </div>
                            <input type="text" class="form-control" id="cropper-example-dataWidth" placeholder="width"
                                readonly="">
                            <div class="input-group-append">
                                <span class="input-group-text">px</span>
                            </div>
                        </div>
                        <div class="input-group input-group-sm mb-1">
                            <div class="input-group-prepend">
                                <span class="input-group-text">Height</span>
                            </div>
                            <input type="text" class="form-control" id="cropper-example-dataHeight" placeholder="height"
                                readonly="">
                            <div class="input-group-append">
                                <span class="input-group-text">px</span>
                            </div>
                        </div>
                        <div class="input-group input-group-sm mb-1">
                            <div class="input-group-prepend">
                                <span class="input-group-text">Rotate</span>
                            </div>
                            <input type="text" class="form-control" id="cropper-example-dataRotate" placeholder="rotate"
                                readonly="">
                            <div class="input-group-append">
                                <span class="input-group-text">deg</span>
                            </div>
                        </div>
                        <div class="input-group input-group-sm mb-1">
                            <div class="input-group-prepend">
                                <span class="input-group-text">ScaleX</span>
                            </div>
                            <input type="text" class="form-control" id="cropper-example-dataScaleX" placeholder="scaleX"
                                readonly="">
                            <div class="clearfix"></div>
                        </div>
                        <div class="input-group input-group-sm mb-1">
                            <div class="input-group-prepend">
                                <span class="input-group-text">ScaleY</span>
                            </div>
                            <input type="text" class="form-control" id="cropper-example-dataScaleY" placeholder="scaleY"
                                readonly="">
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="cropper-example-buttons col-md-9">
                        <div class="btn-group mb-1">
                            <button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1"
                                data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;zoom&quot;,&nbsp;0.1)">
                                <span class="ion ion-md-add"></span>
                            </button>
                            <button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1"
                                data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;zoom&quot;,&nbsp;-0.1)">
                                <span class="ion ion-md-remove"></span>
                            </button>
                        </div>
                        <div class="btn-group mb-1">
                            <button type="button" class="btn btn-primary" data-method="move" data-option="-10"
                                data-second-option="0" data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;move&quot;,&nbsp;-10,&nbsp;0)"><span
                                    class="ion ion-md-arrow-back"></span></button>
                            <button type="button" class="btn btn-primary" data-method="move" data-option="10"
                                data-second-option="0" data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;move&quot;,&nbsp;10,&nbsp;0)"><span
                                    class="ion ion-md-arrow-forward"></span></button>
                            <button type="button" class="btn btn-primary" data-method="move" data-option="0"
                                data-second-option="-10" data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;move&quot;,&nbsp;0,&nbsp;-10)"><span
                                    class="ion ion-md-arrow-up"></span></button>
                            <button type="button" class="btn btn-primary" data-method="move" data-option="0"
                                data-second-option="10" data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;move&quot;,&nbsp;0,&nbsp;10)"><span
                                    class="ion ion-md-arrow-down"></span></button>
                        </div>
                        <div class="btn-group mb-1">
                            <button type="button" class="btn btn-primary" data-method="rotate" data-option="-45"
                                data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;rotate&quot;,&nbsp;-45)"><span
                                    class="ion ion-md-refresh"></span></button>
                            <button type="button" class="btn btn-primary" data-method="rotate" data-option="45"
                                data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;rotate&quot;,&nbsp;45)"><span
                                    class="ion ion-md-refresh scaleX--1"></span></button>
                        </div>
                        <div class="btn-group mb-1">
                            <button type="button" class="btn btn-primary" data-method="scaleX" data-option="-1"
                                data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;scaleX&quot;,&nbsp;-1)"><span
                                    class="ion ion-md-swap"></span></button>
                            <button type="button" class="btn btn-primary" data-method="scaleY" data-option="-1"
                                data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;scaleY&quot;,&nbsp;-1)"><span
                                    class="ion ion-md-swap rotate--90"></span></button>
                        </div>
                        <div class="btn-group mb-1">
                            <button type="button" class="btn btn-primary" data-method="reset"
                                data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;reset&quot;)"><span
                                    class="ion ion-md-sync"></span></button>
                            <label class="btn btn-primary btn-upload" data-toggle="cropper-example-tooltip" title=""
                                data-original-title="Upload image file"><input type="file" class="sr-only"
                                    id="cropper-example-inputImage" name="file"
                                    accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff"><span
                                    class="ion ion-md-cloud-upload"></span></label>
                        </div>
                        <div class="btn-group mb-1">
                            <button type="button" class="btn btn-primary" data-method="getCroppedCanvas"
                                data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;getCroppedCanvas&quot;)">Get Cropped
                                Canvas</button>
                            <button type="button" class="btn btn-primary" data-method="getCroppedCanvas"
                                data-option="{ &quot;width&quot;: 160, &quot;height&quot;: 90 }"
                                data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;getCroppedCanvas&quot;, {width:&nbsp;160,&nbsp;height:&nbsp;90})">160×90</button>
                            <button type="button" class="btn btn-primary" data-method="getCroppedCanvas"
                                data-option="{ &quot;width&quot;: 320, &quot;height&quot;: 180 }"
                                data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;getCroppedCanvas&quot;, {width:&nbsp;320,&nbsp;height:&nbsp;180})">320×180</button>
                        </div>

                    </div>
                </div>
                <!-- Show the cropped image in modal -->
                <div class="modal fade cropper-example-cropped" id="cropper-example-getCroppedCanvasModal"
                    aria-hidden="true" aria-labelledby="cropper-example-getCroppedCanvasTitle" role="dialog"
                    tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="cropper-example-getCroppedCanvasTitle">Cropped</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">×</span></button>
                            </div>
                            <div class="modal-body ie-mh-1"></div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <a class="btn btn-primary" id="cropper-example-download" href="#;"
                                    download="cropped.jpg">Download</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.modal -->
            </div>
        </div>
    </div>
</template>

<script>
import '/public/css/googleapis.css'
import '/public/libs/cropper/cropper.css'
import '/public/css/style.css'
import '/public/libs/datatables/datatables.css'
import '/public/css/coach.css'
     export default {
        data() {
            return {
            car:[]
            }
        },
        mounted () {
           this.getData()
        },
        methods: {
            getData() {
                 var url='dtb/car/logo'
            this.axios.get(url).then(res=>{
                console.log(res);
                this.car=res.data.data
            })
            },
         open(index) {
        this.$confirm('永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
             let id=this.coach[index].c_id
        this.axios.delete(`dtb/coachDelete/${id}`).then(res=>{
            this.getData()
        })
          this.$message({
            type: 'success',
            message: '删除第'+id+'条成功!', 
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },

       add(index) {
        this.$confirm('添加文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消添加'
          });          
        });
      },
         update(index) {
        this.$confirm('修改文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          });          
        });
      }, 
        },
    }
</script>

</script>

<style lang="scss" scoped>
.layout-navbar{
    line-height: 30px !important;
    .breadcrumb{
        line-height: 30px !important;
        position: relative;
        top: 10px;
        li{
          color: fade-in($color: #8082fb, $amount: 0);
        }
    }
}
 .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: rgba($color: #8b8bde, $alpha: .2);
    color: rgb(255, 255, 255);
    font-size:20px;
    text-align: center;
    line-height: 200px;
    border-radius: 0 200px 200px 0;
    box-shadow:0 0 5px 2px  #b7c5f4;
    margin-right: 20px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>